<template>
  <div class="">
    <h1>您的购物车</h1>
    <div v-if="cartItems.length == 0">
        <p>您的购物车为空</p>
    </div>

    <div v-else>
        <div v-for="item in cartItems" :key="item.id">
            <h3>名称：{{item.name}}</h3>
            <p>数量：{{item.quantity}}</p>
            <p>价格：{{(item.price * item.quantity).toFixed(2)}}元</p>
                <button @click="removeFromCart(item.id)">移除购物车</button>
        </div>
        <p>总价：{{total.toFixed(2)}}元</p>
    </div>
  </div>
</template>

<script>
 export default {  
    computed: {  
      cartItems() {  
        return this.$store.state.cartItems;  
      },  
      total() {  
        return this.$store.getters.cartTotal;  
      },  
    },  
    methods: {  
      removeFromCart(itemId) {  
        this.$store.commit('removeFromCart', itemId);
      },  
    },  
  };  
</script>

<style scoped lang="scss">
</style>